Google Charts ব্যবহার করে প্রথমবারের মতো একটি সিম্পল চার্ট তৈরি করা খুবই সহজ। নিচে ধাপে ধাপে প্রক্রিয়া বর্ণনা করা হলো যাতে আপনি Angular অ্যাপ্লিকেশন ব্যবহার করে প্রথম Google Chart তৈরি করতে পারেন।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন)।

ng new google-charts-demo
cd google-charts-demo

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts API ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। ইন্সটল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: কম্পোনেন্টে Google Chart তৈরি করা

এখন, আমরা একটি Pie Chart তৈরি করব। এটি করার জন্য, app.component.ts ফাইলে ডেটা এবং অপশন কনফিগার করতে হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'First Google Chart';

  // Chart Type: Pie Chart
  chartType = 'PieChart'; 
  // Chart Data: ডেটার একটি অ্যারে তৈরি করুন
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; 
  
  // Chart Options: কাস্টম অপশন সেট করুন
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,  // Doughnut style (0.4 means hole size)
    width: 600,
    height: 400
  };
}

এখানে, chartType হলো 'PieChart', এবং chartData হলো একটি অ্যারে যা বিভিন্ন তথ্য প্রদর্শন করবে। chartOptions দিয়ে চার্টের বিভিন্ন কাস্টমাইজেশন সেট করা হয়েছে, যেমন title, pieHole (ডোঘনাট স্টাইলের জন্য), এবং চার্টের width এবং height।

Step 5: HTML ফাইলে Chart রেন্ডার করা

এখন, app.component.html ফাইলে Google Chart রেন্ডার করার জন্য নিচের কোডটি যোগ করুন:

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, google-chart কম্পোনেন্ট ব্যবহার করে আমরা আমাদের Pie Chart রেন্ডার করেছি।

Step 6: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি আপনার প্রথম Google Pie Chart দেখতে পাবেন।

সারাংশ

এভাবে, আমরা Angular এর মধ্যে Google Charts ব্যবহার করে একটি সিম্পল Pie Chart তৈরি করেছি। angular-google-charts লাইব্রেরি ব্যবহার করে আপনি সহজেই Google Charts API ইন্টিগ্রেট করতে পারেন এবং ডেটার ভিজুয়ালাইজেশন করতে পারেন। এই প্রক্রিয়াতে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন, যেমন Line Chart, Bar Chart, Area Chart, Pie Chart ইত্যাদি।